import React, { Component } from 'react'
import './App.scss'
export default class componentName extends Component {
  state = {
    list: [{
      name: 'a',
      isChcked: false,
      id: Math.random().toString().slice(2)
    },{
      name: 'b',
      isChcked: false,
      id: Math.random().toString().slice(2)

    },{
      name: 'c',
      isChcked: true,
      id: Math.random().toString().slice(2)
    }]
  }
  handleClick(id) {
    const { list } = this.state      
    const item = list.find(item => item.id === id)
    item.isChcked = !item.isChcked
    this.setState({
      list
    })
  }
  handleDelete(id) {
    const { list } = this.state
    const newList = list.filter(item => item.id !== id )
    this.setState({
      list: newList
    })
  }
  render() {
    const { list } = this.state
    return (
      <div>
        <h1 className="title">todolist</h1>
        <h2>未完成</h2>
        <ul>
          {
            list.filter(v => !v.isChcked).map((v, i) => {
              return (
                <li key={v.id}>
                  <input type="checkbox" defaultChecked={ v.isChcked } onClick={ () => this.handleClick(v.id) }/>
                  <b>{ v.name }</b>
                  <span onClick={ () => this.handleDelete(v.id) }>X</span>
                </li>
              )
            })
          }
        </ul>


        <h2>完成</h2>
        <ul>
          {
            list.filter(v => v.isChcked).map((v, i) => {
              return (
                <li key={v.id}>
                  <input type="checkbox" defaultChecked={ v.isChcked } onClick={ () => this.handleClick(v.id) }/>
                  <b>{ v.name }</b>
                  <span onClick={ () => this.handleDelete(v.id) }>X</span>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}
